<template>
    <div class="cls1" ref="chartSC"></div>
  </template>
  
  <script setup>
  import * as echarts from 'echarts'
  import { onMounted, ref } from 'vue'
  import request from '../axios/request'
  const chartSC = ref()
  
  function chartsInit(data) {
    var y = [];
    var x = [];
    for (var i = 0; i < data.length; i++) {
        y.push(data[i].total_demand);
        x.push(data[i].line);
    }
  
    var myChart = echarts.init(chartSC.value, 'Light');
    var option = {
      grid: {
              left: '10%',
              right: '10%',
              bottom: '20%',
              top: '10%',
              containLabel: true,
              width: '80%', /* 增大grid的width属性值，可根据实际情况调整占比 */
              height: '70%' /* 增大grid的height属性值，可根据实际情况调整占比 */
          },
        xAxis: {
            type: 'category',
            data: x, // 使用产品编码作为x轴类目数据，保持和原代码类似逻辑，可根据实际情况调整
            axisTick: {
                show: false // 隐藏x轴刻度线，使图表更简洁，可根据喜好选择是否保留
            } // 使用从接口获取到的数据中的名称作为x轴类目数据
        },
        yAxis: {
            type: 'value'
        },
        series: [
            {
                name: '需求量分布',
                type: 'bar', // 将图表类型设置为箱线图
                data: y
            }
        ],
        title: {
    text: '线上线下产品需求量箱线图',
    textStyle: {
      color: '#90E2FF',
      fontSize: 20,
      textAlign: 'center'
    },
    left: 'center',
    bottom: '5%'
  },
    };
  
    option && myChart.setOption(option);
  }
  
  // 组件挂载成功
  onMounted(function () {
    // 发起axios异步请求，获取数据
    request({
        url: '/produce-api/queryAllline',
        method: 'get'
    }).then(res => {
        console.log(res.data.data);
        chartsInit(res.data.data)
    }).catch((error) =>
        console.log(error))
  })
  </script>
  
  <style scoped>
  .cls1 {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }
  </style>